<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贺仪领取专区</title>
    <!-- 添加 Bootstrap 样式链接 -->
    <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/apps/css/fontawesome-free-6.4.0-web/css/all.css">
    <!-- 添加自定义样式链接 -->
    <style>
        body{
            background-image: url('{{{background}}}');
            background-repeat: no-repeat; background-size: 100% 100%;
            background-position: center center; background-size: cover; -o-background-size: cover;
            -webkit-background-size: cover; -moz-background-size: cover;
            padding-bottom: 100px; min-height: 100vh; display: flex; flex-direction: column;
            opacity: 0.618;
        };
        .custom-card {
            background-color: #000; /* 背景颜色设置为黑色 */
            color: #fff; /* 文本颜色设置为白色 */
        }
    </style>
    <script src="/apps/js/baidu-tongji-mtx.js"></script>
</head>
<body>
    <div class="container">

        <div class="row mt-5">
            <div class="col-12">
                <!-- 用户信息区域 -->
                <div class="card custom-card">
                    <div class="card-body">
                        <h5 class="card-title">{{greetingTitle}}</h5>
                        <p class="card-text" id="collapsibleText">
                        </p>
                         <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseText" aria-expanded="false" aria-controls="collapseText">
                            查看详情/收起详情
                        </button>
                    </div>
                    <div class="collapse" id="collapseText">
                        <div class="card-body">
                            致{{member.name}}君：<br><br>
                            今年目标两千万，要靠诸君共努力。<br>
                            团结奋斗不辞勤，成人就己同兴旺。<br><br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;董学锋 敬上<br>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-12">
                <!-- 刮刮卡区域 -->
                <div class="card">
                    <div class="card-body">

                        <h5 class="card-title">您还可领取{{remaining_attempts}}次贺仪</h5>
                        <p class="card-text">{{{giftDescription}}}</p>

                        <!-- 礼品选择下拉框 -->
                        <div class="mb-3 row">
                            <label for="giftSelection" class="col-sm-2 col-form-label">贺仪选项</label>
                            <div class="col-sm-10">
                                <select class="form-select" id="giftSelection">
                                    {{#each giftOptions}}
                                        <option value="{{this.name}}">{{this.description}}</option>
                                    {{/each}}
                                </select>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label for="memo" class="col-sm-2 col-form-label">请分享自己的甲辰职业目标</label>
                            <div class="col-sm-10">
                                <textarea id="memo" name="memo" class="form-control" rows="10" value="" placeholder=""></textarea>
                            </div>
                        </div>

                        <button class="btn btn-primary" id="scratch-button">{{buttonLabel}}</button>
                        <p class="card-text"></p>

                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-12">
                <!-- 贺仪结果 -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">贺仪结果</h5>
                        <ul>
                            {{#each userLotteryResults}}
                            <li>{{this.prize_name}} ({{this.added_at}}) {{this.memo}} {{this.comment}}</li>
                            {{/each}}
                        </ul>
                        <p class="card-text" id="result-tips"></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-12">
                <div class="text-center">
                        <p class="card-text" style="color:#ffffff">尽享畅通润和之美</p>
                        <img src="https://oss.foodtrust.cn//0af03202309272240581217.png" alt="二维码" style="max-width: 80%; max-height: 128px;">
                        <p class="card-text" style="color:#ffffff;font-size:12px">图腾生命医学官方小程序</p>
                        {{!--
                        <img src="https://oss.foodtrust.cn//TT-profile-0-spreader-1414-routine.jpg" alt="二维码" style="max-width: 80%; max-height: 168px;">
                        --}}
                </div>
            </div>
        </div>

    </div>

    <!-- 确认提交弹窗 -->
    <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">确认提交</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>确认提交以下信息：</p>
                    <p>贺仪选项: <span id="confirmGiftSelection"></span></p>
                    <p>寄语自己: <span id="confirmMemo"></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="confirmCancelButton">返回修改</button>
                    <button type="button" class="btn btn-primary" id="confirmSubmitButton">确认提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加 jQuery 和 Bootstrap 的 JavaScript 链接 -->
    <script src="/apps/js/jquery-3.7.1.min.js" defer></script>
    <script src="/apps/js/bootstrap.bundle.min.js" defer></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
    <script src="/apps/js/wx-client-dom.js" defer></script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const uid = {{uid}};
            const balance = parseInt({{pointBalance}});
            const activityOnline = {{activityOnline}};
            const remaining_attempts = parseInt({{remaining_attempts}});
            const remainingPrizes = parseInt({{remainingPrizes}});
            const userDrawedCount = parseInt({{userDrawedCount}});
            const drawButton = document.getElementById("scratch-button");
            const resultTips = document.getElementById("result-tips");

            if (userDrawedCount > 0) {
                resultTips.innerHTML = "{{{resultTips}}}";
            }

            if (!activityOnline) {
                drawButton.disabled = true;
                return;
            }

            if (remaining_attempts < 1) {
                drawButton.innerHTML = '贺仪登记领取机会已用完';
                drawButton.disabled = true;
                return;
            };

            let isDrawing = false; // 添加一个标志位来防止多次点击
            drawButton.addEventListener("click", async function () {
                if (isDrawing) {
                    return;
                }

                isDrawing = true;
                drawButton.disabled = true;

                // 获取用户输入的数据
                const selectedGift = document.getElementById("giftSelection").value;
                const memo = document.getElementById("memo").value;


                // 校验收件地址不为空
                if (!memo && memo.length<10) {
                    alert("请留下有意义的信息");
                    drawButton.disabled = false;
                    isDrawing = false;
                    return;
                }

                // 设置确认弹窗中的信息
                document.getElementById('confirmGiftSelection').innerText = selectedGift;
                document.getElementById('confirmMemo').innerText = memo;

                // 显示确认弹窗
                $('#confirmationModal').modal('show');
            });

            // 如果用户点击确认提交
            document.getElementById('confirmSubmitButton').addEventListener('click', async function () {
                // 隐藏确认弹窗
                $('#confirmationModal').modal('hide');

                const selectedGift = document.getElementById("giftSelection").value;
                const memo = document.getElementById("memo").value;

                // 执行提交逻辑
                try {
                    const response = await fetch("/apps/loyalty/choose-gift/{{lotteryActivity.activity_code}}", {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ uid, selectedGift, memo })
                    });

                    if (response.ok) {
                        const result = await response.json();
                        // 根据贺仪结果更新页面上的显示
                        if (result.prize_id) {
                            const resultMessage = `${result.tips} 【团结奋斗勤，齐心协力赢】`;
                            alert(resultMessage);
                        } else {
                            const resultMessage = `${result.message}`;
                            alert(resultMessage);
                        }
                        location.reload();
                    } else {
                        const resultMessage = "领取贺仪失败，请重试";
                        alert(resultMessage);
                        drawButton.innerHTML = '点击登记领取贺仪';
                        drawButton.disabled = false;
                        isDrawing = false;
                    }
                } catch (error) {
                    console.log('error: ',error);
                    const resultMessage = "登记领取贺仪请求异常，请重试";
                    alert(resultMessage);
                    drawButton.innerHTML = '点击登记领取贺仪';
                    drawButton.disabled = false;
                    isDrawing = false;
                }
            });

            // 如果用户点击返回修改
            document.getElementById('confirmCancelButton').addEventListener('click', function () {
                // 隐藏确认弹窗
                $('#confirmationModal').modal('hide');
                drawButton.disabled = false;
                isDrawing = false;
            });
        });
    </script>

</body>
</html>

